<template>
  <div class="goods">
    <van-icon name="arrow-left" class="back-btn" @click.native="$router.go(-1)"/>
    <van-swipe class="goods-swipe">
      <van-swipe-item v-for="thumb in goods.thumb" :key="thumb">
        <a href="javascript:void(0)" class="item-img-box"><img :src="thumb" ></a>
      </van-swipe-item>
    </van-swipe>

    <van-cell-group>
      <van-cell>
        <div class="goods-title">{{ goods.title }}</div>
        <div class="goods-price">{{ formatPrice(goods.price) }}</div>
      </van-cell>
      <van-cell class="goods-express">
        <van-col span="10">运费：{{ goods.express }}</van-col>
        <van-col span="14">剩余：{{ goods.remain }}</van-col>
      </van-cell>
    </van-cell-group>
    <van-cell-group class="goods-cell-group">
      <van-cell title="请选择属性" isLink></van-cell>
    </van-cell-group>
    <!-- <van-cell-group class="goods-cell-group">
      <van-cell value="进入店铺" icon="shop" isLink>
        <template slot="title">
          <span class="van-cell-text">有赞的店</span>
          <van-tag type="danger">官方</van-tag>
        </template>
      </van-cell>
      <van-cell title="线下门店" icon="location" isLink></van-cell>
    </van-cell-group>
    <van-cell-group class="goods-cell-group">
      <van-cell title="查看商品详情" isLink></van-cell>
    </van-cell-group>
 -->
    
    <div class="meili-all-vue-detail-base-rate">
      <a href="javascipr:void(0)" class="head">
        <span class="head-title">买家评价 200 | 销量 353</span> 
        <div class="head-more">
          <span class="head-more--text"></span>
           <van-icon name="arrow" />
         </div>
      </a>
      <div class="tags">
        <span class="tags-tag tags-tag--positive">有图片 (36)</span>
        <span class="tags-tag tags-tag--positive">有图片 (36)</span>
        <span class="tags-tag tags-tag--positive">有图片 (36)</span>
        <span class="tags-tag tags-tag--positive">有图片 (36)</span>
      </div>
      <div class="list">
        <div class="list-item">
          <div class="user list-item--user">
            <a href="javascript:void(0)" class="user-info">
              <div class="meili-all-vue-base-image user-info--avatar">
                <img src="https://s3.mogucdn.com/p1/160105/idid_ifrtmoddmnsggntfguzdambqhayde_160x160.jpg" class=" lazyload-bind fadeIn lazyload-trigger" style="width: 100%; height: auto; visibility: inherit; display: inherit;">
                
              </div>
              <span class="user-info--name">不***8</span>
            </a>
          </div>
          <div class="content">收到了 物流发货都超级快啊 </div>
          <div class="atts">
            <div class="atts-item">
              <span class="atts-item--base atts-item--time">
                2017-12-18
              </span>
              <span class="atts-item--base atts-item--sku"></span>
            </div>
          </div>
          <div class="imgs">
            <div class="meili-all-vue-base-image imgs-item">
              <a  href="">
                <img  src="https://s3.mogucdn.com/mlcdn/c45406/171207_7l0l3c30bjgfe0ch0a0h6f0d19bik_864x1536.jpg_100x100.webp" class="v-lazy lazyload-bind fadeIn lazyload-trigger" style="width: 100%; height: auto; visibility: inherit; display: inherit;">
              </a>
            </div>
          </div>
        </div>
        <div class="list-item">
          <div class="user list-item--user">
            <a href="javascript:void(0)" class="user-info">
              <div class="meili-all-vue-base-image user-info--avatar">
                <img src="https://s3.mogucdn.com/p1/160105/idid_ifrtmoddmnsggntfguzdambqhayde_160x160.jpg" class=" lazyload-bind fadeIn lazyload-trigger" style="width: 100%; height: auto; visibility: inherit; display: inherit;">
                
              </div>
              <span class="user-info--name">不***8</span>
            </a>
          </div>
          <div class="content">收到了 物流发货都超级快啊 </div>
          <div class="atts">
            <div class="atts-item">
              <span class="atts-item--base atts-item--time">
                2017-12-18
              </span>
              <span class="atts-item--base atts-item--sku"></span>
            </div>
          </div>
          <div class="imgs">
            <div class="meili-all-vue-base-image imgs-item">
              <a  href="">
                <img  src="https://s3.mogucdn.com/mlcdn/c45406/171207_7l0l3c30bjgfe0ch0a0h6f0d19bik_864x1536.jpg_100x100.webp" class="v-lazy lazyload-bind fadeIn lazyload-trigger" style="width: 100%; height: auto; visibility: inherit; display: inherit;">
              </a>
            </div>
          </div>
          <!-- <div class="explain">
            
        [商家回复]:   感谢小仙女百忙之中抽空出来给我们一个评价，很高兴您满意我们家的宝贝，愿风吹起如花般破碎的流年，而你的笑容摇晃摇晃，步伐轻跃跳动，成为我宝途中最美的点缀，每天最开心的事莫过于看到亲的好评，亲的好评就像是清泉一样滋润我们的心田，小店会更加的珍惜亲的好评，不断的改进自己，完善自己，力求让小店的服务做得更好，店铺做得更大，也是为了让亲能够更好的更快的买到自己的喜欢的宝贝。你的好评就是对我们最大的肯定和鼓励，希望亲再次关顾我们的店铺
      
          </div> -->
        </div>
      </div>
    </div>
    <van-cell-group class="goods-cell-group">
      <van-cell icon="shop" title="电子烟店" value="进店逛逛" isLink></van-cell>
      <van-cell>
        <van-row class="tc">
          <van-col span="8">
            <p class="number">238</p>
            全部商品
          </van-col>
          <van-col span="8">
            <p class="number">238</p>
            购买人数
          </van-col>
          <van-col span="8">
            <p class="number">238</p>
            收藏人数
          </van-col>
        </van-row>
      </van-cell>
    </van-cell-group>
    <van-cell-group class="goods-cell-group">
      <van-cell icon="shop" title="商品详情"></van-cell>
      <van-cell>
         <img width="100%" alt="" src="http://lyfimg.gxlyf.cn/goods_image/ydJrzExB4zqZ0e6brn0sAra4gb54fHAm4cHqKRD8.jpeg!body" lazy="loaded">
         <img width="100%" alt="" src="http://lyfimg.gxlyf.cn/goods_image/oCHEhEQT1Jfg1p9YnndPXYbUKxajwANm9IKsAKDd.jpeg!body" lazy="loaded">
         <img width="100%" alt="" src="http://lyfimg.gxlyf.cn/goods_image/HCSxgDDj59YSyOQOqQKGtzE6KuLjagWn9l1rZYrZ.jpeg!body" lazy="loaded">
         <img width="100%" alt="" src="http://lyfimg.gxlyf.cn/goods_image/JVBwKP3WlPs9Fz3H3e3XHPu43pHtaCjhZcqqi69F.jpeg!body" lazy="loaded">
      </van-cell>
    </van-cell-group>
    <van-goods-action>
      <van-goods-action-mini-btn icon="home">
        主页
      </van-goods-action-mini-btn>
      <van-goods-action-mini-btn icon="cart">
        购物车
      </van-goods-action-mini-btn>
      <van-goods-action-big-btn>
        加入购物车
      </van-goods-action-big-btn>
      <van-goods-action-big-btn primary>
        立即购买
      </van-goods-action-big-btn>
    </van-goods-action>
  </div>
</template>

<script>
import {
  Tag,
  Col,Row,
  Icon,
  Cell,
  CellGroup,
  Swipe,
  SwipeItem,
  GoodsAction,
  GoodsActionBigBtn,
  GoodsActionMiniBtn
} from 'vant';

export default {
  components: {
    [Tag.name]: Tag,
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionBigBtn.name]: GoodsActionBigBtn,
    [GoodsActionMiniBtn.name]: GoodsActionMiniBtn
  },

  data() {
    return {
      goods: {
        title: '美国伽力果（约680g/3个）',
        price: 2680,
        express: '免运费',
        remain: 19,
        thumb: [
          'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
          'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
        ]
      }
    };
  },

  methods: {
    formatPrice() {
      return '¥' + (this.goods.price / 100).toFixed(2);
    }
  }
};
</script>

<style lang="less">

</style>